import React,{
    useContext
} from 'react';
import Item from "./Item";
import {TodoContext} from "./index";


const Content = (props)=>{

    const {todoList} = props;
    const {dispath} = useContext(TodoContext);
    //修改状态
    const changeStates = (id)=>{
        todoList.map(e=>{
            if(e.id === id){
                e.status = !e.status;
            }
            return e;
        })
        dispath({
            todoList
        })
    }
    //删除
    const changeDelete = (id)=>{
        dispath({
            type:'Delete',
            id
        })
    }
    return (
        <>
            <div className={'content'}>
                <div className={'title'}>未做：</div>
                {
                    todoList.filter(e=>e.status).map(e=><Item
                        key={e.id}
                        changeStates={changeStates}
                        changeDelete={changeDelete}
                        data={e} />)
                }
            </div>

            <div style={{
                border: 'none'
            }} className={'content'}>
                <div style={{
                    color: 'green'
                }} className={'title'}>已做：
                </div>
                {
                    todoList.filter(e=>!e.status).map(e=>
                        <Item
                        key={e.id}
                        changeStates={changeStates}
                        changeDelete={changeDelete}
                        data={e} />)
                }

            </div>
        </>
    )
}

export default  Content;